<template>
  <div class="statistics-container">
    <LiveOverview :tabs="tabs" @refresh="refresh" />

    <div class="mt-20">
      <LineChart
        :title="title"
        :xAxis="xAxis"
        :yAxis="yAxis"
        :legend="legend"
        :series-data="seriesData"
      />
    </div>
  </div>
</template>

<script>
import { useFilterSingleStatistics } from '@/hooks'
export default {
  name: 'TextStatistics',
  data() {
    return {
      title: {
        text: '近30天短信发送走势',
        left: '1%'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        icon: 'circle',
        data: ['模板短信发送数', '营销短信发送数']
      },
      seriesData: [],
      tabs: [
        {
          isShow: true,
          baseData: {
            label: '总短信条数',
            key: 'totalSmsNum',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterdaySmsNum',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            label: '模板短信',
            key: 'informSmsNum',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterdayInformSmsNum',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            label: '营销短信',
            key: 'marketingSmsNum',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterdayMarketingSmsNum',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        }
      ]
    }
  },
  created() {
    this.getCashCount()
    this.getBrokenLine()
  },
  methods: {
    // 获取实时概况数据
    async getCashCount() {
      const { data } = await this.$http.message.statisticsApi.smsSendStatistics()
      this.getRealTimeConfig(data)
    },
    // 刷新实时概况数据
    refresh() {
      this.getCashCount()
      this.$message.success('更新成功')
    },
    // 获取实时数据配置
    getRealTimeConfig(data) {
      this.tabs = useFilterSingleStatistics(this.tabs, data)
    },
    // 获取折线图数据
    async getBrokenLine() {
      const { data } = await this.$http.message.statisticsApi.smsSendTrend()
      this.xAxis.data = data.map(item => item.date)
      this.seriesData = [
        {
          name: '模板短信发送数',
          data: data.map(item => item.informSmsNum),
          type: 'line'
        },
        {
          name: '营销短信发送数',
          data: data.map(item => item.marketingSmsNum),
          type: 'line'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>
